<div class="modal fade in ip-box" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true"id="add">
  <div class="modal-dialog modal-lg-f" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h4 class="modal-title" id="myModalLabel">中心管理 — 新增</h4>
          </div>
          <div class="modal-body">
              <form #newlyAddedForm="ngForm" name="userAdd_form" novalidate>
                  <div class="overflow-hide form-group">
                      <label class="col-xs-12 col-sm-3 control-label text-right">中心名称：</label>
                      <div class="col-xs-12 col-sm-9">
                          <input type="text" name="centralName" class="form-control" [(ngModel)]="centraladd.name" placeholder="输入角色组名称" forbiddenName="bob"
                              minlength="1" maxlength="20" #centralName="ngModel" required />
                          <!-- [(ngModel)]="rolesadde.roleGroupName" -->
                          <label class="red required">*</label>
                          <!-- <div class="error" ng-show="userAdd_form.roleGroupName.$dirty && userAdd_form.roleGroupName.$invalid">
                          <small class="error" ng-show="userAdd_form.roleGroupName.$error.required">请输入角色组名</small>
                          <small class="error" ng-show="userAdd_form.roleGroupName.$error.minlength">角色组名长度在2-20之间</small>
                          <small class="error" ng-show=" userAdd_form.roleGroupName.$error.maxlength">角色组名长度在2-20之间</small>
                      </div> -->
                          <!-- <div *ngIf="rolesadd.roleGroupName.length === 20">
                              <small class="error"> 角色组名长度不能大于20</small>
                          </div> -->
                          <div *ngIf="centralName.invalid && (centralName.touched)" class="error-alert">
                              <div *ngIf="centralName.errors.required">
                                  <small class="error">请输入角色组名</small>
                              </div>
                              <div *ngIf="centralName.errors.minlength || centralName.errors.maxlength">
                                  <small class="error"> 角色组名长度在1-20之间</small>
                              </div>
                              
                              <div *ngIf="centralName.errors.forbiddenName">
                                  <small class="error"> Name cannot be Bob.</small>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="form-group height-auto">
                      <label class="col-xs-12 col-sm-3 control-label text-right">描述：</label>
                      <div class="col-xs-12 col-sm-9">
                          <textarea rows="5" type="text" placeholder="描述" name="description" #description=ngModel class="form-control" placeholder="描述长度在0-50个汉字之间"
                          minlength="0" maxlength="50" [(ngModel)]="centraladd.description"></textarea>
                          <!-- {{[(ngModel)]="rolesadde.description"}} -->
                          <div *ngIf="description.invalid" class="error-alert text-left">
                              <div *ngIf="description.errors.minlength || description.errors.maxlength">
                                  <small class="error "> 描述长度在0-50之间</small>
                              </div>
                          </div>
                      </div>
                  </div>
              </form>
              <div class="clearfix"></div>
              
          </div>
          <div class="modal-footer modal-footer-30">
              <button type="button" class="btn btn-fff" (click)="reset()">取消</button>
              <button type="button" class="btn btn-primary"  [disabled]="centralName.invalid" (click)="submitAdd()"><span class="glyphicon glyphicon-plus"></span> 新增
              </button>
          </div>
          <!-- 新增内容 END -->
      </div>
  </div>
</div>
